<template>
	<view class="post">
		<view class="pop_select_box">
			<uni-data-select class="huodong_select" v-model="club_id" :localdata="clublist" @change="changeClub"
				placeholder="请选择车友会" emptyTips="- 暂无车友会 -" :clear="false"
				placeholder-style="color: #000000;"></uni-data-select>
		</view>
		<view class="pop_select_box" v-if="huodonglist.length>0">
			<uni-data-select class="huodong_select" v-model="huodong_id" :localdata="huodonglist" @change="changeH"
				placeholder="请选择活动" emptyTips="- 暂无活动 -" :clear="false"
				placeholder-style="color: #000000;"></uni-data-select>
		</view>
		<view class="pop_input_box">
			<view v-if="title.length==0" class="input_red_start">*</view>
			<input class="pop_input flex-1" v-model="title" placeholder="请填写标题" placeholder-style="color:#000000;" />
		</view>
		<view class="pop_textarea_box" style="align-items: flex-start;">
			<view v-if="content.length==0" class="input_red_start">*</view>
			<textarea v-model="content" maxlength='5000' placeholder="请填写内容" placeholder-style="color:#000000;"
				style="height: 450rpx;" :disable-default-padding="true" />
		</view>
		<view class="post_img_box" :style="'padding-bottom:'+ pageSafeArea +'rpx;'">
			<uni-row class="" gutter="15">
				<uni-col v-for="(item,index) in images" :key="index" :span="8">
					<view class="content_img_box">
						<image class="content_img" :src="picUrl+item" mode="aspectFill">
						</image>
						<uni-icons class="content_img_del" @click="delpic(index)" type="trash" size="20"
							color="#fb4a3e"></uni-icons>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="post_bottom_box display_flex" :style="'padding-bottom:'+bottomSafeArea+'rpx;'">
			<view class="display_flex flex-1" @click="uploadContent()">
				<image class="post_camera_img" :src="onlinePic+'post_camera.png'"></image>
				<view class="f-13 ml-5 c-black">添加图片</view>
			</view>
			<view class="post_bottom_submit" @click="submitBbs">发布</view>
		</view>

	</view>
</template>

<script>
	import {
		addClubCard,
		getClubList,
		getClubInfoActiveList,
		checkText
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				club_id: '',
				clublist: [],
				huodong_title: '请选择活动',
				huodonglist: [],
				huodong_id: '',
				title: '',
				content: '',
				images: [],
				count: 9,
				isSubmit: true,
				thank_you_day:0,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pageSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom + 160 : 160,
				bottomSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom + 80 : 90
			};
		},
		onLoad(options) {
			uni.showLoading({})
			this.getClubList()
			this.club_id = options.club_id ? parseInt(options.club_id) : ''
			this.getClubInfoActiveList()
			this.huodong_id = options.huodong_id ? parseInt(options.huodong_id) : ''
			this.thank_you_day = options.thank_you_day ? options.thank_you_day : 0
			var params = {
				event_code: '发帖',
				path: 'pages/bbs/bbspost',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		onShow() {

		},
		methods: {
			getClubList() {
				getClubList({
					page: 1,
					is_all: 1,
					city_id: uni.getStorageSync('clubconfig').city_id,
					size: 100000
				}).then(res => {
					if (res.state == 1) {
						var list = res.data.data
						if (list.length > 0) {
							list.forEach(obj => {
								// 检查对象是否包含要修改的键  
								if ('title' in obj) {
									// 创建一个新键并设置其值为旧键的值  
									obj['text'] = obj['title'];
									obj['value'] = obj['club_id'];
									// 可选：删除旧键  
									delete obj['title'];
									delete obj['club_id'];
									delete obj['car_model'];
									delete obj['desc'];
									delete obj['create_time'];
									delete obj['pic'];
									delete obj['huodong_count'];
									delete obj['join_count'];
									delete obj['logo'];
								}
							});
							this.clublist = list
							uni.hideLoading()
						} else {
							this.clublist = list
							uni.hideLoading()
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeClub(e) {
				this.club_id = e
				this.getClubInfoActiveList()
			},
			getClubInfoActiveList() {
				getClubInfoActiveList({
					club_id: this.club_id,
					page: 1,
					size: 100000
				}).then(res => {
					if (res.state == 1) {
						var list = res.data.data
						if (list.length > 0) {
							list.forEach(obj => {
								// 检查对象是否包含要修改的键  
								if ('title' in obj) {
									// 创建一个新键并设置其值为旧键的值  
									obj['text'] = obj['title'];
									obj['value'] = obj['huodong_id'];
									// 可选：删除旧键  
									delete obj['title'];
									delete obj['huodong_id'];
									delete obj['huodong_status'];
									delete obj['pic'];
									delete obj['create_time'];
									delete obj['desc'];
									delete obj['type'];
									delete obj['view'];
								}
							});
							this.huodonglist = list
						} else {
							this.huodonglist = list
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeH(e) {
				this.huodong_id = e
			},
			uploadContent() {
				var that = this
				var params = {
					event_code: '发帖',
					path: 'pages/bbs/bbspost',
					event_id: '',
					title: '',
					source_page: '发帖-上传图片',
					value: '',
				}
				app.BurialPoint(params)
				var countNum = 9 - that.images.length
				if (countNum > 0) {
					// uni.chooseVideo
					uni.chooseMedia({
						count: countNum,
						mediaType: ['image'],
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'],
						success: function(res) {
							uni.showLoading({
								title: '正在上传'
							})
							var tempFilePaths = res.tempFiles
							console.log(res.tempFiles)
							that.uploadImage(tempFilePaths, 0)
						}
					});
				} else {
					uni.showToast({
						title: '最多上传9张图片',
						icon: 'none',
						mask: true,
						duration: 1500
					})
				}
			},
			uploadImage(files, i) {
				var i
				uni.uploadFile({
					url: app.globalData.uploadUrl,
					filePath: files[i].tempFilePath,
					name: 'img',
					success: (res) => {
						var picdata = JSON.parse(res.data);
						this.images.push(picdata.data.img);
						i++
						if (i < files.length) {
							this.uploadImage(files, i)
						} else {
							uni.hideLoading()
						}
					}
				});
			},
			delpic(index) {
				var that = this
				uni.showModal({
					content: '确定要删除这张图片吗？',
					confirmText: '删除',
					cancelText: "取消",
					success: function(res) {
						if (res.confirm) {
							var params = {
								event_code: '发帖',
								path: 'pages/bbs/bbspost',
								event_id: '',
								title: '',
								source_page: '发帖-删除图片',
								value: '',
							}
							app.BurialPoint(params)
							that.images.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submitBbs() {
				var that = this
				if (that.isSubmit) {
					that.isSubmit = false
					if (that.title == '') {
						uni.showToast({
							title: '请填写标题',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}
					if (that.content == '') {
						uni.showToast({
							title: '请填写内容',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}
					if (that.images.length == 0) {
						uni.showToast({
							title: '请上传图片',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}
					var checktext = that.title + that.content
					checkText({
						content: checktext,
					}).then(res => {
						if (res.state == 1) {
							uni.showModal({
								content: '确定发布吗？',
								confirmColor: '#00A0DC',
								success: function(res) {
									if (res.confirm) {
										var content = that.content
										var content = content.replace(/\n/g, '<br/>')
										console.log(content)
										addClubCard({
											title: that.title,
											content: content,
											images: that.images,
											huodong_id: that.huodong_id,
											thank_you_day:that.thank_you_day
										}).then(res => {
											if (res.state == 1) {
												uni.showToast({
													title: '发布成功',
													icon: 'success',
													duration: 1500
												});
												uni.setStorage({
													key: 'onload',
													data: true
												})
												uni.setStorage({
													key: 'onloadbbs',
													data: true
												})
												setTimeout(function() {
													if(that.thank_you_day==0){
														uni.redirectTo({
															url: '/pages/bbs/bbsinfo?card_id=' +
																res.data.card_id
														})
													}else if(that.thank_you_day==1){
														uni.navigateBack({
															delta:1
														})
													}
													
													that.club_id = ''
													that.title = ''
													that.content = ''
													that.images = ''
													that.huodong_id = ''
													that.isSubmit = true
												}, 1200)
											} else {
												that.isSubmit = true
												uni.showToast({
													title: res.data.error[0],
													icon: 'none',
													duration: 1500
												});
											}
										})
										var params = {
											event_code: '发帖',
											path: 'pages/bbs/bbspost',
											event_id: '',
											title: '',
											source_page: '发帖-发布',
											value: '',
										}
										app.BurialPoint(params)
									} else {
										that.isSubmit = true
									}
								}
							});

						} else {
							that.isSubmit = true
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							});
						}
					})
				}
			},
		},
		onUnload() {}
	}
</script>

<style lang="scss">
	.post {
		padding: 40rpx;

		.pop_input_box {
			font-size: 26rpx;
			padding: 25rpx;
			display: flex;
			margin-bottom: 40rpx;
			align-items: center;
			border-radius: 8rpx;
			border: 1rpx solid #E9E9E9;

		}

		.pop_select_box {
			font-size: 26rpx;
			padding: 25rpx 0;
			display: flex;
			margin-bottom: 40rpx;
			align-items: center;
			border-radius: 8rpx;
			border: 1rpx solid #E9E9E9;

			.huodong_select {
				flex: 1;

				.uni-select {
					font-size: 26rpx !important;
					height: 1.4rem !important;
					border: 0px solid #E9E9E9 !important;
					box-sizing: border-box;
					border-radius: 4px;
					padding: 0 25rpx !important;
					border-bottom: solid 0px #E9E9E9 !important;
					width: 100%;
					flex: 1;

					.uni-select__input-placeholder {
						color: #000000;
						font-size: 26rpx !important;
					}

					.uni-select__selector {
						width: auto !important;
						left: -2rpx !important;
						right: -2rpx;
					}

					.uni-select__input-text {
						color: #000000 !important;
					}
				}
			}
		}

		.pop_textarea_box {
			font-size: 26rpx;
			padding: 25rpx;
			display: flex;
			align-items: center;
			border-radius: 4px;
			border: 1rpx solid #E9E9E9;
		}

		textarea {
			width: 100%;
			line-height: 2;
		}

		.post_img_box {
			margin-top: 40rpx;

			.content_img_box {
				position: relative;
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 15rpx;
				border-radius: 8rpx;

				.content_img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					vertical-align: middle;
				}

				.content_img_del {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					z-index: 1;
					padding: 20rpx;
				}
			}


			.content_img_block {
				width: 198rpx;
				height: 198rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F2F2F2;
			}
		}

		.submit_btn_img_box {
			position: fixed;
			left: 30rpx;
			right: 30rpx;
			bottom: 13%;

			.submit_btn_img {
				width: 100%;
				vertical-align: middle;
			}
		}

		.post_bottom_box {
			position: fixed;
			left: 40rpx;
			right: 40rpx;
			bottom: 0;
			z-index: 1;
			padding: 30rpx 40rpx;
			background-color: #ffffff;
			border-bottom: 1rpx solid #E9E9E9;

			.post_camera_img {
				width: 38rpx;
				height: 36rpx;
				vertical-align: middle;
			}

			.post_bottom_submit {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 187rpx;
				height: 89rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 129rpx;
				background: #00A0DC;
				border-radius: 8rpx;
				border: 1px solid #00A0DC;
			}
		}

		.input_red_start {
			color: #F84949;
			font-size: 26rpx;
			margin-right: 5rpx;
		}
	}
</style>